<template>
  <a-form-model :model="form" ref="ruleForm" :label-col="labelCol"
    :wrapper-col="wrapperCol">
    <a-form-model-item
  	 label="案例名称"
	  ref="case_name"
	   prop="case_name"
    >
		<a-input
		  v-model="form.case_name"
		  @blur="
			() => {
			  $refs.case_name.onFieldBlur();
			}
		  "
		/>
    </a-form-model-item>
    <a-form-model-item
      label="案例描述"
    >
	<a-input
	  v-model="form.case_dec"
	/>
    </a-form-model-item>
    <a-form-model-item
      label="案例封面"
    >
	<a-upload
	      action="https://admin.lhlzgroup.com/api/upload/img"
	      list-type="picture-card"
	      :file-list="fileList"
	      @preview="handlePreview"
	      @change="handleChange"
	    >
	      <div v-if="fileList.length < 1">
	        <a-icon type="plus" />
	        <div class="ant-upload-text">
	          Upload
	        </div>
	      </div>
	    </a-upload>
	    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
	      <img alt="example" style="width: 100%" :src="previewImage" />
	    </a-modal>
    </a-form-model-item>
    </a-form-model-item>
    <a-form-model-item
      label="案例内容"
    >
	 <wang-editor v-model="form.case_con" @change="change"></wang-editor>
    </a-form-model-item>
  </a-form-model>
</template>

<script>
import {uploadImg} from '@/api/upload.js'	
import {caseCreat,caseEdit} from '@/api/case.js'	
import wangEditor from '@/components/Editor/WangEditor'

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

const fields = ['title', 'startAt', 'owner', 'description']

export default {
  name: 'addCase',
  props: {
    record: {
      type: Object,
      default: null
    }
  },
  components: {
    wangEditor
  },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      },
	  previewVisible: false,
	  previewImage: '',
	  fileList:[],
      form: {
		  case_name:'',
		  case_dec:'',
		  case_con:'',
		  case_src:'',
	  },
    }
  },
  mounted () {
	  if (this.record.id) {
	  	this.form = JSON.parse(JSON.stringify(this.record));
		if(this.form.case_src!=''){
			this.fileList.push({
			  uid: '-1',
			  name: 'image.png',
			  status: 'done',
			  url: this.vuex_src+this.form.case_src,
			})
		}
	  }
  },
  methods: {
	// 富文本编辑事件
	change(con){
		this.form.case_con = con;
	},
   handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
   	 file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
    },
    upload(e){
   	 console.log(e)
   	let formData=new FormData();
   	formData.append('file',e.file)
   	console.log(formData) 
   	uploadImg(formData).then(res=>{
   	})
    },
   onOk () {
   	 console.log('监听了 modal ok 事件')
   	if(this.record.id){
   			if(this.fileList.length>0&&this.fileList[0].uid!=-1){
   				this.form.case_src = this.fileList[0].response.url;
   			}
   		 // 编辑
   			return new Promise(resolve => {
   				caseEdit(this.form).then(res=>{
   				  resolve(true)
   				})
   			})
   	}else{
   		 // 创建
   		 if(this.fileList.length>0){
   			 this.form.src = this.fileList[0].response.url;
   		 }
   		 return new Promise(resolve => {
   		 	caseCreat(this.form).then(res=>{
   		 	  resolve(true)
   		 	})
   		 })
   	}
   },
   onCancel () {
     console.log('监听了 modal cancel 事件')
     return new Promise(resolve => {
       resolve(true)
     })
   },
  }
}
</script>
